<template>
  <div>
    <div id="part_one">
      <span><b>卡号头部：</b></span>
      <el-input v-model="input" placeholder="按卡号头部查询">
      </el-input>
    </div>
    <div id="part_two">
      <el-dialog id="platform"
                 title="添加新的卡号"
                 :visible.sync="dialogVisible"
                 width="30%"
                 height="40%"
                 :before-close="handleClose">
        <div class="item">
          卡号头部
          <el-input v-model="NproductsName" ></el-input>
        </div>
        <div class="item">
          <span>卡类型</span>
          <el-select span="18" v-model="value" placeholder="请选择卡类型">
            <el-option v-for="item in cities"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
            </el-option>
          </el-select>
        </div>
        <div class="item">
          <span>卡归属</span>
          <el-select span="18" v-model="value" placeholder="请选择卡类型">
            <el-option v-for="item in cities"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
            </el-option>
          </el-select>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onsmit">确 定</el-button>
        </span>
      </el-dialog>
      <div>
        <el-button type="primary" @click="dialogVisible = true" slot="reference">+添加卡号</el-button>
        <span class="sub_span">归属：</span>
        <el-radio v-model="radio" label="1">大客户</el-radio>
        <el-radio v-model="radio" label="2">代理</el-radio>
      </div>
      <div>
        <el-button icon="el-icon-search">查询</el-button>
        <el-button icon="el-icon-refresh-left">重置</el-button>
      </div>
    </div>
    <div>
      <el-table :data="tableData">
        <el-table-column prop="date"
                         label="ID">
        </el-table-column>
        <el-table-column prop="name"
                         label="卡号头部">
        </el-table-column>
        <el-table-column prop="province"
                         label="卡类型">
        </el-table-column>
        <el-table-column prop="city"
                         label="归属">
        </el-table-column>
        <el-table-column prop="cz"
                         label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)">编辑</el-button>
            <el-button type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="part_four">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage4"
                     :page-sizes="[100, 200, 300, 400]"
                     :page-size="100"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="400">
      </el-pagination>
    </div>
  </div>
</template>
<style scoped>
  #platform {
    text-align: center;
  }
  .item {
    margin-bottom: 20px;
  }
  .item>span{
    margin-right:50px;
  }
  .item>.el-input{
   width:280px;
  }

  #part_one {
    display: flex;
    align-items: center;
    padding: 20px 10px;
  }

    #part_one > span {
      margin-left: 30px;
    }

  .sub_span {
    margin-left: 20px;
  }

  .el-input {
    width: 200px;
  }

  #part_two {
    display: flex;
    justify-content: space-between;
    padding: 0 50px 0 40px;
    margin: 0 0 20px;
  }

  #part_four {
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }
</style>
<script>
  export default {
    data() {
      return {
        input: '',
        visible: false,
        dialogVisible: false,
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          cz: ""

        }]

      }
    },
    methods: {
      handleClick() {
        alert('button click');
      },
      handleClick(row) {
        console.log(row);
      }
    }
  }

</script>

